<template>
  <div class="order">
    <!-- 我的订单 -->
    <h3>我的订单</h3>
    <el-main>
      <el-table :data="tableData" style="width: 100%" v-if='isExistOrder'>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.productName }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="商品数量">
                <span>{{ props.row.count }}</span>
              </el-form-item>
            
              <el-form-item label="收件地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="状态">
                <span>{{ props.row.state }}</span>
              </el-form-item>
              <el-form-item label="物流号">
                <span>{{ props.row.currentId }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="productName"></el-table-column>
        <el-table-column label="商品图片" prop="pic">
          <template slot-scope="props">
            <img :src="getPic(props.row.productPic)" alt style="width:100px ;height:100px" />
          </template>
        </el-table-column>
        <el-table-column label="下单时间" > <template slot-scope="scope">{{ change(scope.row.orderDate) }}</template></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-popover placement="top" v-model="scope.row.remove">
                <p>亲！确定删除此商品吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.remove=false">取消</el-button>
                  <el-button type="primary" size="mini" @click.native.prevent="handleDelete(scope.$index, tableData)">确定</el-button>
                </div>
                <el-button slot="reference">删除</el-button>
              </el-popover>
            </template>
          <!-- <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, tableData)">删除</el-button>
          </template> -->
        </el-table-column>
      </el-table>
   <el-row v-if="!isExistOrder">
           <el-col :span="24"><div class="ww">订单空空如也</div></el-col>
        </el-row>
    </el-main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      isExistOrder:false,
    };
  },
  computed:{
      user: {
      get() {
        return this.$store.state.user;
      },
      set(v) {
        this.$store.state.user = v;
      }
    }
  },
  methods:{
       change(date) {
      return this.$moment(new Date(date)).format("YYYY-MM-DD HH:mm:ss");
    },
    getPic(pic) {
      let path = "http://localhost:3000/images/" + pic;
      console.log(path);
      return path;
    },
    handleDelete(index,rows){
      
       console.log('orderId='+this.tableData[index].orderId)
       this.$axios.delete('http://localhost:3000/order/delOrder',{params:{orderId:this.tableData[index].orderId}})
       .then(res=>{
         console.log(res.data.data)
         if(res.data.data!=-1){
            this.$message({
            message:'删除成功',
            type:'success'
          })
           rows.splice(index, 1);
         }
         
       })
    }
  },
  created(){
     this.$axios
     .get('http://localhost:3000/order/orderDedail',{params:{userId:this.user[0].userId}})
     .then(res=>{
        //  console.log('个人订单'+res.data.data)
         if(res.data.data.length!=0){
           this.tableData=res.data.data.reverse()
         this.isExistOrder=true
     
         }
         
     })
     .catch(err=>{
         console.log(err)
     })
  }
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.ww{
   width:850px;
   height: 280px;
   color:#aaa;
   line-height: 280px;
}
</style>
